<template>
  <van-tabbar v-model="active">
    <van-tabbar-item to="/films">
      <template #icon="props">
        <van-icon name="video-o" />
      </template>
      <span>电影</span>
    </van-tabbar-item>
    <van-tabbar-item to="/cinemas" icon="shop-o">影院</van-tabbar-item>
    <van-tabbar-item to="/news">
      <template #icon="props">
        <xw-icon :active="props.active" href="icon-yonghuziliaogerenxinxigerenziliao-xianxing"></xw-icon>
      </template>
      <span>资讯</span>
      </van-tabbar-item>
    <van-tabbar-item to="/center" icon="setting-o">个人</van-tabbar-item>
  </van-tabbar>
</template>

<script>
// vw vh rem em px
// import Vue from 'vue';
// import { Button } from 'vant';
// Vue.use(Button);
export default {
  data() {
    return {
      active: 0
    }
  }
}
</script>

<style lang="scss" scoped>
/* 样式的重写 */
.van-tabbar-item--active {
  color: #ff5f16 !important;
}
</style>
